<template>
  <div>
    <el-carousel
      height="550px"
      indicator-position="none"
      :interval="interval"
      :autoplay="autoplay"
      @change="carouselChange"
    >
      <el-carousel-item v-for="(value, index) in lists" :key="value.pic">
        <img :src="value.src" alt class="pic" @click="showindex(index, value.pic)">
      </el-carousel-item>
    </el-carousel>
    <img :src="lotteryimg" :class="{pic: hasPic, blur: hasBlur}">
    <h3>恭喜{{ lottery }}</h3>
    <el-button type="primary" @click="sTop">点我</el-button>
    <el-button type="primary" @click="washCards">洗牌</el-button>
    <el-button type="primary" @click="goscroll">滚动</el-button>
    <el-button type="primary" @click="stopscroll">停</el-button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      sourindex: 0,
      hasPic: true,
      hasBlur: false,
      starting: false,
      flag: "",
      lotteryimg: "",
      autoplay: false,
      lottery: "",
      imgUrl: require("../../static/photos/3500174350-04646301.jpg"),
      lists: [
        {
          pic: "1",
          src: require("../../static/photos/3500174350-04646301.jpg")
        },
        {
          pic: "2",
          src: require("../../static/photos/3500174350-04646302.jpg")
        },
        {
          pic: "3",
          src: require("../../static/photos/3500174350-04646303.jpg")
        },
        {
          pic: "4",
          src: require("../../static/photos/3500174350-04646304.jpg")
        },
        {
          pic: "5",
          src: require("../../static/photos/3500174350-04646305.jpg")
        },
        {
          pic: "6",
          src: require("../../static/photos/3500174350-04646306.jpg")
        },
        {
          pic: "7",
          src: require("../../static/photos/3500174350-04646307.jpg")
        },
        {
          pic: "8",
          src: require("../../static/photos/3500174350-04646308.jpg")
        },
        {
          pic: "9",
          src: require("../../static/photos/3500174350-04646309.jpg")
        }
      ],
      animate: false,
      interval: 300,
      interval_1: 1000,
      items: [
        //消息列表对应的数组
        { name: "马云" },
        { name: "雷军" },
        { name: "王勤" },
        { name: "马云1" },
        { name: "雷军1" },
        { name: "王勤1" },
        { name: "马云2" },
        { name: "雷军2" },
        { name: "王勤2" }
      ],
      page: [1, 2, 3, 4, 5]
    };
  },
  created() {
    //   setInterval不断调用(执行函数, 间隔时间)
  },
  methods: {
    carouselChange: function(key1, key2) {
      //    console.log(key1 + ",,,*," + key2);
      this.sourindex = key1;
    },
    showindex(index, src) {
      console.log(index);
      console.log("轮到索引:" + src);
      this.$message("点了:" + this.sourindex);
      this.lottery = this.lists[this.sourindex].pic;
      //   删除这张图片所在索引
      this.lists.splice(this.sourindex, 1);
      this.$message("现在数组长度" + this.lists.length);
    },
    goscroll() {
      //   this.flag = setInterval(this.scroll,this.interval);
      this.starting = true;
      this.hasBlur = true;
      this.scrollv2();
      console.log(this.starting);
    },
    stopscroll() {
      //   clearInterval(this.flag);
      this.hasBlur = false;
      this.starting = false;
    },
    _fomatNum(num) {
      //   格式化成字符，长度补全
      num += "";
      let length = num.length;
      if (length === 1) {
        num = "000" + num;
      }
      if (length === 2) {
        num = "00" + num;
      }
      if (length === 3) {
        num = "0" + num;
      }
      return num;
    },
    washCards() {
      let tmp;
      let j;
      let lottery1;
      for (let i = 0; i < this.lists.length; i++) {
        tmp = this.lists[i];
        j = Math.floor(Math.random() * this.lists.length);
        this.lists[i] = this.lists[j];
        this.lists[j] = tmp;
      }
      console.log("--分隔线--");
      this.lists.forEach(function(item) {
        console.log(item.src);
      });
      this.lists.push(this.lists[0]);
      this.lists.shift();
      lottery1 = Math.floor(Math.random() * this.lists.length);
      console.log("中奖的是:" + lottery1);
      console.log(this.lists[lottery1].src);
      this.lists.splice(lottery1, 1);

      //   console.log(this.lists)
    },
    scroll() {
      let lottery1;
      this.animate = true;
      this.hasBlur = true;
      setTimeout(() => {
        this.items.push(this.items[0]);
        this.items.shift();
        this.animate = false; // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
        lottery1 = Math.floor(Math.random() * this.lists.length);
        console.log("中奖的是:" + lottery1);
        console.log(this.lists[lottery1].src);
        this.lotteryimg = this.lists[lottery1].src;
      }, this.interval_1);
    },
    scrollv2() {
      let lottery1;
      if (this.starting == false) {
        return false;
      } else {
        lottery1 = Math.floor(Math.random() * this.lists.length);
        console.log("中奖的是:" + lottery1);
        console.log(this.lists[lottery1].src);
        this.lotteryimg = this.lists[lottery1].src;
        setTimeout(() => {
          this.scrollv2();
        }, 50);
      }
    },
    sTop() {
      this.autoplay = !this.autoplay;
      this.hasBlur = false;
      console.log("随机数" + Math.floor(Math.random() * 10));
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
* {
  margin: 0;
  padding: 0;
}
#box {
  width: 300px;
  height: 62px;
  line-height: 30px;
  overflow: hidden;
  padding-left: 30px;
  border: 1px solid black;
  transition: all 0.5s;
}
.anim {
  transition: all 1.5s;
  margin-top: -34px;
}
.pic {
  width: 640px;
  height: 480px;
}
.blur {
  /* -webkit-filter: blur(1px); Chrome, Opera */
  /* -moz-filter: blur(10px); */
  /* -ms-filter: blur(10px); */
  filter: blur(1px);
}
#con1 li {
  list-style: none;
  line-height: 34px;
  height: 34px;
}
</style>